<template>
  <div class="search">
    <div class="searchTop">
      <div class="searchContext">
        <div style="margin-top: 15px;">
          <el-input placeholder="请输入内容" v-model="searchValue">
            <el-button slot="append" icon="el-icon-search" @click="searchSongs(searchValue)"></el-button>
          </el-input>
        </div>
      </div>
    </div>
    <div class="songs">
        <music :toSongs ='songs'  />
    </div>
    
  </div>

  
</template>

<script>
import music from '../components/music.vue'
export default {
    components:{music},
  data() {
    return {
      searchValue: this.$route.query.keywords,
      songs:[]
    }
  },
  methods: {
      searchSongs(info){
          this.getSearchSongs(info)
      },
     getSearchSongs(info){
          var url = `https://autumnfish.cn/cloudsearch?keywords=${info}`
          this.axios.get(url).then(res=>{
              this.songs = res.data.result.songs
          })
      }
     
  },
  created(){
      let keywords = this.$route.query.keywords
      this.getSearchSongs(keywords)
  }
}
</script>
<style scoped>
.search .searchTop {
  height: 18vw;
  background: url(https://static1-music.taihe.com/client/img/4985994.png) 50%
    no-repeat;
  background-size: cover;
  position: relative;
}
.search .searchTop .searchContext {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  margin-top: -25px;
  text-align: center;
}
.el-input-group {
  width: 10%;
}
.search >>> .el-input__inner {
  width: 600px;
  height: 50px;
  padding-right: 50px;
  line-height: 50px;
  font-size: 16px;
}
.songs {
       width: 80vw;
        margin: 30px auto;
}
</style>
